<template>
  <div class="app-container home">
    <!-- <el-button type="success" @click="showDialogWithData"
      >弹窗表单（带数据）</el-button
    > -->
    <div class="header">
      <TitleComponent mainTitle="数据概览" subTitle="" />
    </div>
    <div class="crud_content">
      <div class="card">
        <div class="card-body">
          <avue-form v-model="form" :option="option" @submit="handleSubmit" @reset-change="handleReset"></avue-form>
        </div>
      </div>

      <div class="card-container">
        <div class="container">
          <div class="box">
            <div style="flex: 1;height: 70%">
              <img src="/images/cz.png" alt="" style="width: 80%;height: 85%;margin-left:15%">
            </div>
            <div style="flex: 2">
              <div class="title">充值(时间)</div>
              <div class="content">{{ Data.rechargeAmount ? Data.rechargeAmount : 0 }}</div>
            </div>
          </div>
          <div class="box">
            <div style="flex: 1;height: 63%">
              <img src="/images/tx.png" alt="" style="width: 80%;height: 85%;margin-left:15%">

            </div>
            <div style="flex: 2">
              <div class="title">提现(时间)</div>
              <div class="content">{{ Data.cashWithdrawalAmount ? Data.cashWithdrawalAmount : 0 }}</div>
            </div>
          </div>
          <div class="box">
            <div style="flex: 1;height: 63%">
              <img src="/images/vip.png" alt="" style="width: 80%;height: 85%;margin-left:15%">

            </div>
            <div style="flex: 2">
              <div class="title">新增VIP(时间)</div>
              <div class="content">{{ Data.addVipCount ? Data.addVipCount : 0 }}</div>
            </div>
          </div>
          <div class="box">
            <div style="flex: 1;height: 63%">
              <img src="/images/zc.png" alt="" style="width: 80%;height: 85%;margin-left:15%">

            </div>
            <div style="flex: 2">
              <div class="title">注册人数(时间)</div>
              <div class="content">{{ Data.registerCount ? Data.registerCount : 0 }}</div>
            </div>
          </div>
          <div class="box">
            <div style="flex: 1;height: 63%">
              <img src="/images/rw.png" alt="" style="width: 80%;height: 85%;margin-left:15%">
            </div>
            <div style="flex: 2">
              <div class="title">任务人数(时间)</div>
              <div class="content">{{ Data.taskCount ? Data.taskCount : 0 }}</div>
            </div>
          </div>
        </div>
      </div>

      <div style="margin: 20px 0">
        <div class="card">
          <h3>VIP数量统计</h3>
          <el-table :data="vipData" style="width: 100%">
            <el-table-column :prop="key" :label="key" v-for="(value, key) in vipData[0]" :key="index"></el-table-column>
          </el-table>
        </div>
      </div>

      <div class="card-container">
        <div class="container">
          <div class="boxs">
            <div style="flex: 1;height: 70%">
              <img src="/images/zcz.png" alt="" style="width: 60%;height: 80%;margin-left:15%">
            </div>
            <div style="flex: 2">
              <div class="title">总充值</div>
              <div class="content">{{ Data.totalRechargeAmount ? Data.totalRechargeAmount : 0 }}</div>
            </div>
          </div>
          <div class="boxs">
            <div style="flex: 1;height: 70%">
              <img src="/images/ztx.png" alt="" style="width: 60%;height: 80%;margin-left:15%">
            </div>
            <div style="flex: 2">
              <div class="title">总提现</div>
              <div class="content">{{ Data.totalCashWithdrawalAmount ? Data.totalCashWithdrawalAmount : 0 }}</div>
            </div>
          </div>
          <div class="boxs">
            <div style="flex: 1;height: 70%">
              <img src="/images/zvip.png" alt="" style="width: 60%;height: 80%;margin-left:15%">
            </div>
            <div style="flex: 2">
              <div class="title">总VIP</div>
              <div class="content">{{ Data.totalVipCount ? Data.totalVipCount : 0 }}</div>
            </div>
          </div>
          <div class="boxs">
            <div style="flex: 1;height: 70%">
              <img src="/images/zzc.png" alt="" style="width: 60%;height: 80%;margin-left:15%">
            </div>
            <div style="flex: 2">
              <div class="title">总注册人数</div>
              <div class="content">{{ Data.totalRegisterCount ? Data.totalRegisterCount : 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import TitleComponent from "@/components/title/index.vue";
//setup用法
import { statistics } from "@/api/refersh/financialManagement.js";
import { dateFormat } from '@/utils/date.js'
const Data = ref({})
import { getCurrentInstance } from "vue";
import moment from 'moment-timezone';

const { appContext } = getCurrentInstance();
// 测试
const vipData = ref([
  {
    VIP1: '',
    VIP2: '',
    VIP3: '',
    VIP4: '',
    VIP5: '',
  },
]);

const form = reactive({});
const option = reactive({
  labelWidth: 110,
  submitBtn: true,
  column: [
    {
      label: "时间",
      type: "datetimerange",
      prop: "datetimerange",
      span: 8,
      format: "YYYY-MM-DD HH:mm:ss",
      valueFormat: "YYYY-MM-DD HH:mm:ss",
      startPlaceholder: "开始时间日期",
      endPlaceholder: "结束时间日期",
    },
    {
      label: "代理编号",
      prop: "agentNum",
      span: 8,
    },
    {
      label: "用户账号",
      prop: "agentName",
      order: 1,
      span: 8,
    },
  ],
});
const getNonEmptyProperties = (obj) => {
  const result = {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key) && obj[key] !== null && obj[key] !== undefined && obj[key] !== '') {
      result[key] = obj[key];
    }
  }
  if (result.datetimerange && result.datetimerange.length) {
    result.startDate = result.datetimerange[0]
    result.endDate = result.datetimerange[1]
    delete result.datetimerange
  } else {
    result.startDate = calculateTimes()[1],
      result.endDate = calculateTimes()[0],
      delete result.datetimerange

  }
  return result;
}
const handleSubmit = (form, done) => {
  let res = getNonEmptyProperties(form)
  onload2(res)
  done()
}
const handleReset = (done) => {
  const result = {
    startDate: calculateTimes()[1],
    endDate: calculateTimes()[0],
  };
  onload2(result)

  done()
}

const onload2 = async (form = {}) => {

  apiHandler(form)

}
const apiHandler = async (form) => {
  let res = await statistics(form)
  console.log('asncy', res);
  let data = res.data
  let params = {}
  res.data.vipInfoList.forEach(item => {
    params[item.vipName] = item.count
  })
  vipData.value = [params]
  let { vipInfoList, ...rest } = data
  Data.value = rest
}
// function calculateTimes() {
//   // 纽约时区
//   const timeZone = 'America/New_York';

//   // 获取当前时间
//   const now = new Date();

//   // 设置时间为昨天的0点0分0秒
//   const startOfYesterday = new Date(now);
//   startOfYesterday.setDate(now.getDate() - 1);
//   startOfYesterday.setHours(0, 0, 0, 0);

//   // 设置时间为昨天的23点59分59秒
//   const endOfYesterday = new Date();
//   endOfYesterday.setHours(0, 0, 0, 0);

//   // 格式化为 yyyy-MM-dd HH:mm:ss
//   const options = {
//     timeZone,
//     year: 'numeric',
//     month: '2-digit',
//     day: '2-digit',
//     hour: '2-digit',
//     minute: '2-digit',
//     second: '2-digit',
//     hour12: false,
//   };

//   const startStr = startOfYesterday.toLocaleString('en-CA', options).replace(',', '');
//   const endStr = endOfYesterday.toLocaleString('en-CA', options).replace(',', '');

//   // 返回数组
//   return [endStr, startStr];
// }

// console.log(calculateTimes());

const calculateTimes = () => {
  const timezone = 'America/New_York';
  // 获取昨天0点
  let startOfYesterday = moment.tz(timezone).startOf('day').subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  // 获取今天0点
  let startOfToday = moment.tz(timezone).startOf('day').format('YYYY-MM-DD HH:mm:ss');
  return [startOfToday,startOfYesterday]
}

const onload = async (form = {}) => {
  apiHandler(form)
  let startDate = calculateTimes()[1]
  let endDate = calculateTimes()[0]
  option.column.find(item => item.prop === 'datetimerange').value = [startDate, endDate]
  console.log('params', vipData.value);
}
onload({
  startDate: calculateTimes()[1],
  endDate: calculateTimes()[0]
})
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.bg-white {
  background-color: #fff;
  color: #2a2e30 !important;
}

.card {
  box-shadow: 0 2px 4px 0 rgba(13, 13, 13, 0.05);
  margin-bottom: 3rem;
  border-radius: 0.25rem;
}

.card-header {
  padding: 1.1rem 1.1rem 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.card-body,
.card-footer {
  padding: 1.1rem;
}

.container {
  display: flex;
  justify-content: space-between;
  height: 10rem;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(20% - 1rem);
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
}

.boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(25% - 1rem);
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
}

.title {
  padding: 1.1rem 1.1rem 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.content {
  padding: 1.1rem;
}

h3 {
  margin-bottom: 16px;
}

.el-table th {
  text-align: center;
}

.el-table td {
  text-align: center;
}
</style>
